import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  Image,
  Button,
  TouchableOpacity,
  ProgressBarAndroid,
} from "react-native";

const ProcessBar = ({ initData }) => {
  const showData = {
    okColor: initData.okColor != undefined ? initData.okColor : "#67C23A",
    noColor: initData.noColor != undefined ? initData.noColor : "#9B9EA3",
    nowStep: initData.nowStep != undefined ? initData.nowStep : 0,
    stepDetails:
      initData.stepDetails != undefined ? initData.stepDetails : ["", "", ""],
  };

  return (
    <View
      style={{
        // width: "100%",
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        // paddingStart: "10%",
      }}
    >
      <View
        style={{
          alignItems: "center",
        }}
      >
        <View
          style={{
            height: 20,
            width: 20,
            borderRadius: 50,
            alignItems: "center",
            borderWidth: 1,
            padding: 1,
            borderColor:
              showData.nowStep >= 1 ? showData.okColor : showData.noColor,
            backgroundColor: showData.nowStep >= 1 ? "#67C23A" : null,
          }}
        >
          <Text
            style={{
              fontSize: 12,
              color: showData.nowStep >= 1 ? "#FFFFFF" : showData.noColor,
            }}
          >
            {showData.nowStep >= 1 ? "√" : "1"}
          </Text>
        </View>
        <Text
          style={{
            marginTop: 5,
            color: showData.nowStep >= 1 ? showData.okColor : showData.noColor,
          }}
        >
          {showData.stepDetails[0]}
        </Text>
      </View>
      <View
        style={{
          alignSelf: "center",
          width: "20%",
          height: 1,
          marginBottom: "5%",
          backgroundColor:
            showData.nowStep >= 1 ? showData.okColor : showData.noColor,
        }}
      />
      <View
        style={{
          alignItems: "center",
        }}
      >
        <View
          style={{
            height: 20,
            width: 20,
            borderRadius: 50,
            alignItems: "center",
            borderWidth: 1,
            padding: 1,
            borderColor:
              showData.nowStep >= 2 ? showData.okColor : showData.noColor,
            backgroundColor: showData.nowStep >= 2 ? "#67C23A" : null,
          }}
        >
          <Text
            style={{
              fontSize: 12,
              color: showData.nowStep >= 2 ? "#FFFFFF" : showData.noColor,
            }}
          >
            {showData.nowStep >= 2 ? "√" : "2"}
          </Text>
        </View>
        <Text
          style={{
            marginTop: 5,
            color: showData.nowStep >= 2 ? showData.okColor : showData.noColor,
          }}
        >
          {showData.stepDetails[1]}
        </Text>
      </View>
      <View
        style={{
          alignSelf: "center",
          width: "20%",
          height: 1,
          marginBottom: "5%",
          backgroundColor:
            showData.nowStep >= 2 ? showData.okColor : showData.noColor,
        }}
      />
      <View
        style={{
          alignItems: "center",
        }}
      >
        <View
          style={{
            height: 20,
            width: 20,
            borderRadius: 50,
            alignItems: "center",
            borderWidth: 1,
            padding: 1,
            borderColor:
              showData.nowStep >= 3 ? showData.okColor : showData.noColor,
            backgroundColor: showData.nowStep >= 3 ? "#67C23A" : null,
          }}
        >
          <Text
            style={{
              fontSize: 12,
              color: showData.nowStep >= 3 ? "#FFFFFF" : showData.noColor,
            }}
          >
            {showData.nowStep >= 3 ? "√" : "3"}
          </Text>
        </View>
        <Text
          style={{
            marginTop: 5,
            color: showData.nowStep >= 3 ? showData.okColor : showData.noColor,
          }}
        >
          {showData.stepDetails[2]}
        </Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({});

export default ProcessBar;
